<template>
  <div>
    <!-- 横向分布 justify-content:flex-start-->
    <!-- 纵向居中align-items:center -->
    <div style="z-index: 2;display: flex;justify-content: flex-start;
			background-color: rgb(243, 244, 246);
			height: 11%;
			position: fixed;top: 0;left: 0;width: 100%;
			border-bottom:0.5px solid #c3b2bb;align-items: center;">
      <div style="font-size: 20px;margin-left: 0px;height: 11vh;
			text-align: center;width: 100px;line-height: 11vh;
			cursor: pointer;" @click="gotoHome()">Aria
      </div>
      <form
          style="display: flex;align-items: center;margin-left: 150px;height: 11vh;display: flex;justify-content: flex-start;">
        <div class="inputBox">
          <input id="inputtop" type="text" placeholder="">
        </div>
        <span style="width: 10px;"></span>
        <div class="inputBox">
          <input type="submit" value="检索">
        </div>
      </form>
      <span style="width: 20%;"></span>
      <div style="height: 11vh;align-items: center;line-height: 11vh;">{{ this.$store.state.borderflag }}</div>
      <span style="width: 5%;"></span>
      <div style="line-height: 11vh;">欢迎，xxx</div>
      <button class="logout" style="height: 40px;position: absolute;right:30px;">退出登录</button>
    </div>
    <div class="shell" style="top: 8%;z-index: 1;position: fixed;left:0" @mouseover="changeflag(true)"
         @mouseout="changeflag(false)">
      <a class="box"><span></span></a>
      <a style="cursor: pointer;" class="box" @click="gotoMsg()"><i
          class="el-icon-user-solid"></i><span>个人信息</span></a>
      <a style="cursor: pointer;" class="box" @click="gotoColl()"><i
          class="el-icon-star-on"></i><span>关注/收藏</span></a>
      <a style="cursor: pointer;" class="box"><i class="el-icon-message-solid"></i><span>消息中心</span></a>
      <a style="cursor: pointer;" class="box"><i class="el-icon-s-platform"></i><span>最近浏览</span></a>
      <a style="cursor: pointer;" class="box"><i class="el-icon-s-flag"></i><span>门户系统</span></a>
    </div>
    <div class="scroll" style="border:solid;height:87%;position: absolute;display: flex;margin-top: 4.7%;width:93%"
         :class="{onleft:this.$store.state.divflag,onright:!this.$store.state.divflag}">
      <div
          style="margin-top: 30px;margin-left: 5%;width: 20vw;position: fixed;box-shadow:5px 5px 15px #999999;height: auto"
          >
        <div style="text-align: center;background-color:#0c7bb3;width: 20vw;">
          <img src="../assets/selector.png">
        </div>
        <!--        <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" ref="tree"-->
        <!--                 @check-change="handleCheckChange">-->
        <!--        </el-tree>-->
        <div style="width: 20vw;height: auto">
          <el-collapse>
            <el-collapse-item>
              <template slot="title">
                <div style="text-align: center;width: 100%;margin-top: 10px">
                  <img src="../assets/time.png" width="100">
                </div>
              </template>
              <div style="margin-left: 5%">
                <el-checkbox v-model="picked" id="1" label="以前-1949" @change="handleCheckChange">以前-1949</el-checkbox>
                <el-checkbox v-model="picked" id="2" label="1949-1975" @change="handleCheckChange">1949-1975</el-checkbox>
                <el-checkbox v-model="picked" id="3" label="1975-2000" @change="handleCheckChange">1975-2000</el-checkbox>
                <el-checkbox v-model="picked" id="4" label="2000-现在" @change="handleCheckChange">2000-现在</el-checkbox>
              </div>
              <div>
                <input type="text" data-nolog="1" pattern="[0-9]*" size="4" placeholder="年" maxlength="4" name=""  class="sc-input" value="" style="margin-left: 5%">
                ——
                <input type="text" data-nolog="1" pattern="[0-9]*" size="4" placeholder="年" maxlength="4" name="" class="sc-input" value="">
                <input type="submit" value="确认" class="leftnav_input_sub" style="margin-left: 5%">
              </div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <div style="text-align: center;width: 100%;margin-top: 10px">
                  <img src="../assets/domain.png" width="100">
                </div>
              </template>
              <div style="margin-left: 5%">
                <el-checkbox v-model="picked" id="5" label="文学" @change="handleCheckChange">文学</el-checkbox>
                <el-checkbox v-model="picked" id="6" label="理学" @change="handleCheckChange">理学</el-checkbox>
                <el-checkbox v-model="picked" id="7" label="工学" @change="handleCheckChange">工学</el-checkbox>
              </div>

            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <div style="text-align: center;width: 100%;margin-top: 10px">
                  <img src="../assets/type.png" width="100">
                </div>
              </template>
              <div style="margin-left: 5%">
                <el-checkbox v-model="picked" id="8" label="期刊" @change="handleCheckChange">期刊</el-checkbox>
                <el-checkbox v-model="picked" id="9" label="会议" @change="handleCheckChange">会议</el-checkbox>
                <el-checkbox v-model="picked" id="10" label="报纸" @change="handleCheckChange">报纸</el-checkbox>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

      </div>
      <div style="margin-left: 30%;  margin-top: 30px;width: 60%;height: 88%">
        <div style="display: flex;justify-content: space-between">
          <div style="margin-left: 5%;margin-top: 5%" class="result_sum">
            找到{{ this.search_num }}条相关结果
          </div>
          <div style="float: right;margin-right: 5%">
            <el-dropdown @command="handleCommand">
              <div class="el-dropdown-link" style="float: right;display: inline">
                <br><br>
                排序方式<i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="发布时间">按发布时间</el-dropdown-item>
                <el-dropdown-item command="相关性">按相关性</el-dropdown-item>
                <el-dropdown-item command="回收量">按引用量</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

        <div v-for="(item,index) in resultlist.slice(index1,index2)">
          <br>
          <el-card shadow="hover" style="margin-left: 5%;margin-right: 4%;">
            <div slot="header" class="clearfix" style="height: 8px;" @click="jumptoliter(item)">
              <span style="font-size: 20px;font-weight:bold;">{{ item.name }}</span>
              <div style="float: right;font-size: 15px;color: cornflowerblue">
                <i class="el-icon-user-solid"></i>{{ item.author }}
              </div>
            </div>
            <div style="font-size: 5px">
              <span style="font-weight: bold;">摘要:</span>
              <span>{{ item.summary }}</span>
            </div>
            <div class="text item">
              <span style="font-size: 10px;color: #1a0dab;"> 来源: {{ item.resource }} </span>
              <span style="font-size: 10px;color: #1a0dab;"> 发表时间：{{ item.time }} </span>
              <span style="font-size: 10px;color: #1a0dab;"> 被引用量：{{ item.reference }} </span>


              <el-button type="primary" icon="el-icon-s-flag"
                         style="float: right; padding: 1px 2px;font-size: 15px;margin-left: 10px" @click="cite">
                引用
              </el-button>

              <el-button type="primary" icon="el-icon-share"
                         style="float: right; padding: 1px 2px;font-size: 15px;margin-left: 10px" @click="share">
                分享
              </el-button>
<!--              <el-button type="primary" icon="el-icon-star-off"-->
<!--                         style="float: right; padding: 1px 2px;font-size: 15px;" @click="collect">收藏-->
<!--              </el-button>-->
            </div>
          </el-card>
        </div>
        <div style="margin-left: 5%;margin-top: 2%">
          <el-pagination background layout="prev, pager, next" :total="this.resultlist.length"
                         :current-page.sync="newPage"
                         @current-change="change_page(newPage)">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="分享" :visible.sync="centerDialogVisible" width="20%" center>
      <div id="code">
        <a href="http://baidu.com">https://www.baidu.com/</a>
      </div>
      <span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
			</span>
    </el-dialog>
    <el-dialog title="引用" :visible.sync="dialogTableVisible">
      <el-table :data="reference_text">
        <el-table-column property="type" label="引用标准" width="150"></el-table-column>
        <el-table-column property="context" label="引文内容" width="500"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="copy(scope.row)" size="small" :data-clipboard-text="copyValue" class="btn1">
              复制
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
import axios from "axios";
import $ from "jquery"

export default {
  data() {
    return {
      picked:[],
      index1: 0,
      index2: 10,
      newPage: 0,
      search_num: 0,
      copyValue: "",
      reference_text: [{
        type: "GB/T 7714-2015 格式引文",
        context: "[1]吕云翔,杨洪洋,许鸿智,陈妙然,黎昆昌.基于华为云DevCloud的“软件工程”实训课程改革初探——以软件学院为例[J].工业和信息化教育,2021(10):83-87."
      }, {
        type: "MLA格式引文",
        context: "[1]吕云翔, et al.\"基于华为云DevCloud的“软件工程”实训课程改革初探——以软件学院为例.\" 工业和信息化教育 .10(2021):83-87. doi:CNKI:SUN:GYXH.0.2021-10-021."
      },
        {
          type: "APA格式引文",
          context: "[1]吕云翔,杨洪洋,许鸿智,陈妙然 & 黎昆昌.(2021).基于华为云DevCloud的“软件工程”实训课程改革初探——以软件学院为例. 工业和信息化教育(10),83-87. doi:CNKI:SUN:GYXH.0.2021-10-021."
        }
      ],
      centerDialogVisible: false,
      dialogTableVisible: false,

      resultlist: [],
      showlist: [],
      props: {
        label: 'name',
        children: 'zones'
      },
      count: 1,
      data: [{
        id: 1,
        label: '时间',
        children: [{
          id: 2,
          label: '以前-1949',
        }, {
          id: 3,
          label: '1949-2000'
        }, {
          id: 4,
          label: '现今-2000'
        }]
      }, {
        id: 5,
        label: '领域',
        children: [{
          id: 6,
          label: '文学'
        }, {
          id: 7,
          label: '理学'
        }, {
          id: 8,
          label: '工学'
        }]
      }, {
        id: 9,
        label: '获取方式',
        children: [{
          id: 10,
          label: '百度学术'
        }, {
          id: 11,
          label: '谷歌学术'
        }]
      }, {
        id: 12,
        label: '类型',
        children: [{
          id: 13,
          label: '期刊'
        }, {
          id: 14,
          label: '会议'
        }, {
          id: 14,
          label: '报纸'
        }]
      },],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    jumptoliter(item){
		console.log(item+"diaoyong");
		console.log(item.name+"hh");
      this.$router.push('/literature/'+item.id);
    },
    handleCheckChange() {
      function escape2Html(str) {
        var arrEntities = {
          'lt': '<',
          'gt': '>',
          'nbsp': ' ',
          'amp': '&',
          'quot': '"'
        };
        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
          return arrEntities[t];
        });
      }

      // let res = this.$refs.tree.getCheckedNodes();
      // let text = this.$route.params.text;
      // let arr = []
      // res.forEach((item) => {
      //   arr.push(item.label)
      // })
      alert(this.picked)
      const self = this;
      self.axios({
        method: 'post',
        url: '/select/',
        data: {
          'shaixuan': this.picked,
          'keyword': text
        },
        headers: {
          'X-CSRFToken': this.getCookie('csrftoken')
        },
      }).then(res => {
        //获得相关的showlist
        this.resultlist.splice(0, this.resultlist.length);
        var obj1 = JSON.parse(res.data);
        this.search_num = obj1.time;
        var obj = obj1.result;
        //[['文件名','作者名',...],[],[]]
        for (let i = 0; i < obj.length; i++) {
          var temp = {
            name: escape2Html(obj[i][0]),
            author: obj[i][1],
            key_word: obj[i][2],
            resource: obj[i][3],
            summary: escape2Html(obj[i][4]).substring(0, 40) + "...",
            link: obj[i][5],
            reference: obj[i][6],
            time: obj[i][7],
            id:obj[i][8]
          }
          this.resultlist.splice(0, 0, temp)
        }
      })
    },
    change_page(newPage) {
      this.index1 = (newPage - 1) * 10;
      this.index2 = this.index1 + 10;
      // this.showlist = this.resultlist.slice((newPage-1) * 10 , (newPage-1) * 10 + 10);
    },
    getCookie(name) {
      var value = '; ' + document.cookie;
      var parts = value.split('; ' + name + '=');
      if (parts.length === 2) return parts.pop().split(';').shift();
    },
    cite() {
      this.dialogTableVisible = true;
    },
    share() {
      this.centerDialogVisible = true;
    },
    collect() {
      this.$message({
        message: '收藏成功',
        type: 'success'
      });
    },
    handleCommand(command) {
      this.$message('click on item ' + command);
    },
    gotoHome() {
      this.$router.push('/')
    },
    clickinput() { //onfocus
      document.getElementById("inputtop").placeHolder = "";
    },
    outinput() { //onblur
      document.getElementById("inputtop").placeHolder = "请输入内容"
    },
    gotoMsg() {
      this.$router.push('/personalpage/personalmsg')
      localStorage.setItem("show_num", "1");
    },
    gotoColl() {
      this.$router.push('/personalpage/personalcollect');
      localStorage.setItem("show_num", "2");

    },
    changeflag(flag) {
      if (flag === true) {
        this.$store.state.divflag = false;
      } else {
        this.$store.state.divflag = true;
      }
    },
  },

  mounted() {
    let text = this.$route.params.text;
    const self = this;
    function escape2Html(str) {
      var arrEntities = {
        'lt': '<',
        'gt': '>',
        'nbsp': ' ',
        'amp': '&',
        'quot': '"'
      };
      return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
        return arrEntities[t];
      });
    }

    self.axios({
      method: 'post',
      url: '/highsearchtext/',
      data: {
        'data': this.$store.state.highform
      },
      headers: {
        'X-CSRFToken': this.getCookie('csrftoken')
      },
    }).then(res => {
      var obj1 = JSON.parse(res.data);
      this.search_num = obj1.time;
      var obj = obj1.result;
      //[['文件名','作者名',...],[],[]]
      for (let i = 0; i < obj.length; i++) {
        var temp = {
          name: escape2Html(obj[i][0]),
          author: obj[i][1],
          key_word: obj[i][2],
          resource: obj[i][3],
          summary: escape2Html(obj[i][4]).substring(0, 40) + "...",
          link: obj[i][5],
          reference: obj[i][6],
          time: obj[i][7],
		  id:obj[i][8]
        }
		console.log(temp.id)
        this.resultlist.push(temp)
      }
    })
  }
};
</script>

<style>
.selectbox{
  background: url("../assets/selector.png") no-repeat;
}
.result_sum {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  word-wrap: break-word;
  word-break: break-word;
  text-align: left;
  font-size: 13px;
  line-height: 23px;
  color: #999;
}

.onleft {
  margin-left: 6.5%;
  width: 93.5%
}

.onright {
  margin-left: 17%;
  width: 83%
}

.shell {
  position: absolute;
  left: 0;
  width: 6.5%;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgb(17, 24, 39);
  border-top-left-radius: 0em;
  border-top-right-radius: 0em;
  border-bottom-right-radius: 1em;
  border-bottom-left-radius: 1em;
  transition: .3s;
  overflow: hidden;
}

.box {
  height: 1%;
  width: 85%;
}

.box {
  display: block;
  justify-content: center;
  align-items: center;
  height: 15%;
  width: 85%;
  margin: 9px;
  border-radius: 5px;
  position: relative;
  transition: .3s;
  color: rgb(160, 160, 175);
}

.box i {
  font-size: 30px;
  position: absolute;
  margin: 15px 0 0 20px;
  /* margin-left: 30%;
margin-top: 30%; */
}

.box:nth-child(1) {
  height: 0px;
}

.box:nth-child(1)::after,
.box:nth-child(5)::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: rgb(55, 65, 81);
  position: absolute;
  bottom: -10px;
}

.box span {
  position: relative;
  top: 30%;
  left: 40%;
  font-size: 15px;
  opacity: 0;
  transition: .1s;
}

.shell:hover {
  width: 17%;
}

.shell:hover .contain {
  margin-left: 200px;
}

.box:hover {
  background-color: rgb(55, 65, 81);
}

.shell:hover span {
  opacity: 1;
}

.box:hover {
  color: #fff;
}

.shell:nth-child(2) {
  background-color: rgb(243, 244, 246);
}

.shell:nth-child(2) .box:hover {
  background-color: rgb(209, 213, 219);
  color: rgb(135, 140, 241);
}

.shell:nth-child(2) .box {
  color: #000;
}

.shell:nth-child(3) {
  background-color: rgb(49, 46, 129);
}

.shell:nth-child(3) .box:hover {
  background-color: rgb(67, 56, 202);
}

.shell:nth-child(3) .box {
  color: rgb(140, 120, 240);
}

.inputBox input {
  width: 100%;
  padding: 10px 20px;
  background: rgba(91, 91, 91, 0.2);
  outline: none;
  border: none;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  letter-spacing: 1px;
  color: #191919;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.inputBox input:nth-child(2) {
  justify-content: center;
  align-items: center;
}

.inputBox input::placeholder {
  color: #191919;
}

.inputBox input[type="submit"] {
  background: #fff;
  color: #666;
  width: 75px;

  /* margin-bottom: 20px; */
  font-weight: 600;
  cursor: pointer;
}

.logout {
  background: rgba(91, 91, 91, 0.2);
  outline: none;
  border: none;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  letter-spacing: 1px;
  color: #191919;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  background: #fff;
  color: #666;
  width: 100px;
  /* margin-bottom: 20px; */
  font-weight: 600;
  cursor: pointer;
}

.scroll {
  margin: auto;
  overflow: auto;

}

.scroll::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}

/*正常情况下滑块的样式*/

.scroll::-webkit-scrollbar-thumb {

  background-color: rgba(0, 0, 0, .05);

  border-radius: 10px;

  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);

}

/*鼠标悬浮在该类指向的控件上时滑块的样式*/

.scroll:hover::-webkit-scrollbar-thumb {

  background-color: rgba(0, 0, 0, .2);

  border-radius: 10px;

  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);

}

/*鼠标悬浮在滑块上时滑块的样式*/

.scroll::-webkit-scrollbar-thumb:hover {

  background-color: rgba(0, 0, 0, .4);

  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);

}

/*正常时候的主干部分*/

.scroll::-webkit-scrollbar-track {

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);

  background-color: white;

}

/*鼠标悬浮在滚动条上的主干部分*/

.scroll::-webkit-scrollbar-track:hover {

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);

  background-color: rgba(0, 0, 0, .01);

}
</style>
